import { useAppDispatch, useAppSelector } from '@/hooks/useReduxHook'
import { getWebCount } from '@/store/webInfoSlice'
import React, { useEffect } from 'react'
import style from './UserInfo.module.scss'
export default function UserInfo():React.ReactElement {
    
    const dispactch =useAppDispatch()
    useEffect(()=>{
     dispactch(getWebCount())
    },[dispactch])
    const webInfo = useAppSelector((state)=>state.webInfo.webInfo)
    const webCount = useAppSelector((state)=>state.webInfo.webCount)
  return (
    <div className={`${style['user-info']} shadow__box`}>
    <img className={style['user-avatar']} width="120" height="120" src={webInfo.avatar} />
    <div className={style['web-name']}>{webInfo.name }</div>
    <div className={style['web-info']}>
      <div className={style['blog-info-box']}>
        <span>文章</span>
        <span className={style['blog-info-num']}>{webCount.articleCount }</span>
      </div>
      <div className={style['blog-info-box']}>
        <span>分类</span>
        <span className={style['blog-info-num']}>{ webCount.categoryCount }</span>
      </div>
      <div className={style['blog-info-box']}>
        <span>标签</span>
        <span className={style['blog-info-num']}>{ webCount.tagCount }</span>
      </div>
    </div>
    <a className={style['collection-btn']}>
      <i className="iconfont icon-xinghao" style={{marginRight: '2px'}}></i>朋友圈
    </a>
  </div>
  )
}
